<template>
	<view style="height: 100%;">
		<nav-bar :title="title" :autoBack="true"></nav-bar>
		<view class="copy-body">
			<view :style="{height:statusHeight}" class="copy-status">
				<view class="copy-status-time">
					23:30
				</view>
				<view class="copy-status-icon">
					<u-icon name="wifi" :size="iconSizeStatus"></u-icon>
				</view>
			</view>
			<view class="copy-title-bar">
				<view class="copy-title-bar-text">
					微信
				</view>
				<view class="copy-title-bar-action">
					<view class="action-icon">
						<u-icon name="search" :size="iconSizeAction"></u-icon>
					</view>
					<view class="action-icon">
						<u-icon name="plus-circle" :size="iconSizeAction"></u-icon>
					</view>
				</view>
			</view>
			<view class="copy-list">
				<uni-list :border="true">
					<!-- 显示圆形头像 -->
					<uni-list-chat title="李泽测试数据" avatar="/static/img/weChat/test.jpg" note="你好" time="2020-02-02 20:20">
					</uni-list-chat>
					<!-- 右侧带角标 -->
					<uni-list-chat title="李泽测试数据" avatar="/static/img/weChat/test.jpg" note="你已添加了xxx,现在可以开始聊天了."
						time="2020-02-02 20:20"></uni-list-chat>
					<!-- 头像显示圆点 -->
					<uni-list-chat title="李泽测试数据" avatar="/static/img/weChat/test.jpg"
						note="滴滴加油福利官-小桔妹妹:请不要在群内发送广告等信息,三次警告后" time="2020-02-02 20:20" badge-positon="left"
						badge-text="dot">
						<!-- <template v-slot:body>
								<view>滴滴加油福利官-小桔妹妹:请不要在群内发送广告等信息,三次警告后</view>
							</template> -->
						<!-- 自定义 body -->
						<!-- 	<template v-slot:body>
										<text class="slot-box slot-text">自定义插槽</text>
									</template> -->
					</uni-list-chat>
					<!-- 头像显示角标 -->
					<uni-list-chat title="李泽测试数据" avatar="/static/img/weChat/test.jpg" note="[好哒]" time="2020-02-02 20:20"
						badge-positon="left" badge-text="99"></uni-list-chat>
				</uni-list>
			</view>
			<view class="foot">
				<i class="iconfont icon-wechat"></i>
				<i class="iconfont icon-tongxunlu1"></i>
				<i class="iconfont icon-biaoqing" style="font-size: 30px;"></i>
				<i class="iconfont icon-wode" style="font-size: 20px;"></i>
			</view>
				
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '微信界面',
				navBg: null,
				bgColor: '#c7c9ce',
				iconSizeStatus: 16,
				iconSizeAction: 22
			}
		},
		computed: {
			statusHeight() {
				// TODO:这是uview提供的api，暂时去掉 
				// return uni.$u.addUnit(uni.$u.sys().statusBarHeight, 'px')
			}
		},
		mounted() {

		}
	}
</script>

<style scoped lang="less">
	.copy-body{
		display: flex;
		flex-direction: column;
	}
	.copy-status {
		background-color: #ededed;
		display: flex;
		justify-content: space-between;

		.copy-status-time {
			font-size: 12px;
		}

		.copy-status-icon {}
	}

	.copy-title-bar {
		height: 40px;
		display: flex;
		position: relative;

		.copy-title-bar-text {
			display: flex;
			font-family: 黑体;
			font-weight: bold;
			justify-content: center;
			align-items: center;
			font-size: 16px;
			background-color: #ededed;
			width: 100%;
		}

		.copy-title-bar-action {
			position: absolute;
			right: 16px;
			display: flex;
			align-items: center;
			height: 100%;

			.action-icon {
				margin-left: 16px;
			}
		}
	}
	.copy-list{
		flex-grow: 1;
	}
	::v-deep .uni-list-chat__content-note {
		display: inline-block;
		width: 100%;
	}
	.foot{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		position: absolute;
		bottom: 0;
		height: 50px;
		background-color: #ededed;
		width: 100%;
		align-items: center;
		.iconfont{
			font-size: 22px;
			color: red;
		}
	}
</style>
